<template>
	<view class="conent">
		<view class="conent-top">
			<image class='conent-img' :src="groupImg" alt=""></image>
		</view>
		<view class="myProject">
			<view class="myPlan">
				<view style="border-bottom: 1px #E5E5E5 solid;">
					<text class="myPlan-title">我的计划</text>
					<text class="myPlan-date">{{new Date().getFullYear()}}年{{new Date().getMonth()+1}}月</text>
				</view>
				<view class="myPlan-Task">
					<view class="myPlan-examine" @click="myPlanClick('../supervision/routineCheck/index')">
						<text class="myPlan-examine_title" style="">例行检查</text>
						<view class="myPlan-Task-bg">
							<text class="myPlan-examine_home">{{routineList.planInspCount}}家</text>
							<text class="myPlan-examine_issue">有问题{{routineList.issueCount}}</text>
							<view class="myPlan-Task-bottom">
								<text class="myPlan-examine_bottom"
									style="background-color: #FFE6B7;">待检查{{routineList.awaitInspCount}}</text>
								<text class="myPlan-examine_bottom"
									style="background-color: #C4E3FB;">已检查{{routineList.alreadyInspCount}}</text>
							</view>
						</view>
					</view>
					<view class="myPlan-examine" @click="myPlanClick('../supervision/hiddenDanger/index')">
						<text class="myPlan-examine_title">隐患排查</text>
						<view class="myPlan-Task-bg">
							<text class="myPlan-examine_home">{{dangerList.planInspCount}}家</text>
							<text class="myPlan-examine_issue">有问题 {{dangerList.issueCount}}</text>
							<view class="myPlan-Task-bottom">
								<text class="myPlan-examine_bottom"
									style="background-color: #FFE6B7;">待检查{{dangerList.awaitInspCount}}</text>
								<text class="myPlan-examine_bottom"
									style="background-color: #C4E3FB;">已检查{{dangerList.alreadyInspCount}}</text>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="myPlan">
				<view style="border-bottom: 1px #E5E5E5 solid;">
					<text class="myPlan-title">我的方案</text>
					<text class="myPlan-date">{{new Date().getFullYear()}}年{{new Date().getMonth()+1}}月</text>
				</view>
				<view class="myPlan-Task">
					<view class="myPlan-examine" @click="myPlanClick('../supervision/specialRectification/index')">
						<text class="myPlan-examine_title" style="">专项整治</text>
						<view class="myPlan-Task-bg">
							<text class="myPlan-examine_home">{{renovateList.planInspCount}}家</text>
							<text class="myPlan-examine_issue">有问题 {{renovateList.issueCount}}</text>
							<view class="myPlan-Task-bottom">
								<text class="myPlan-examine_bottom"
									style="background-color: #FFE6B7;">待检查{{renovateList.awaitInspCount}}</text>
								<text class="myPlan-examine_bottom"
									style="background-color: #C4E3FB;">已检查{{renovateList.alreadyInspCount}}</text>
							</view>
						</view>
					</view>
					<view class="myPlan-examine" @click="myPlanClick('../supervision/securityControl/index')">
						<text class="myPlan-examine_title">节假日和重大活动</text>
						<view class="myPlan-Task-bg">
							<text class="myPlan-examine_home">{{safetyList.planInspCount}}家</text>
							<text class="myPlan-examine_issue">有问题 {{safetyList.issueCount}}</text>
							<view class="myPlan-Task-bottom">
								<text class="myPlan-examine_bottom" style="background-color: #FFE6B7;">待检查</text>
								<text class="myPlan-examine_bottom" style="background-color: #C4E3FB;">已检查</text>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="myTask">
				<view style="border-bottom: 1px #E5E5E5 solid;">
					<text class="myPlan-title">我的任务</text>
				</view>
				<view style="display: flex;justify-content: space-around">
					<view class='nav_view' v-for='(item,index) in detailsList' @click='tastClick(item.path,index)'>
						<image class='nav_img' :src="item.src1" mode=""></image>
						<image class='nav_img nav_img_center' :src="item.src2" mode=""></image>
						<text class='nav_text'>{{item.name}}</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/common/api/notice.js'
	import groupImg from "/static/index/banner.png"
	import {
		dateFormat
	} from '@/common/util.js'
	export default {
		data() {
			return {
				detailsList: [{
						src1: '/static/index/nav_bg6.png',
						src2: '/static/index/group6.png',
						name: '现场询查',
						path: '../supervision/fieldInspection/patrolName'
					},
					{
						src1: '/static/index/nav_bg1.png',
						src2: '/static/index/group1.png',
						name: '例行检查',
						path: '../supervision/routineCheck/checkTask'
					},
					{
						src1: '/static/index/nav_bg2.png',
						src2: '/static/index/group2.png',
						name: '隐患排查',
						path: '../supervision/hiddenDanger/checkTask'
					},
					{
						src1: '/static/index/nav_bg3.png',
						src2: '/static/index/group3.png',
						name: '专项整治',
						path: '../supervision/specialRectification/checkTask'
					},
					{
						src1: '/static/index/nav_bg4.png',
						src2: '/static/index/group4.png',
						name: '安全监管',
						path: '../supervision/securityControl/checkTask'
					}
				],
				// type: "error",
				// value: 100
				routineList: [],
				dangerList: [],
				renovateList: [],
				safetyList: [],
				groupImg: groupImg
			}
		},
		onShow() {},
		onLoad() {},
		mounted() {
			// 例行检查
			api.default.getRoutineCheck({
				"planYear": new Date().getFullYear(),
				"planMonth": [
					new Date().getMonth() + 1
				]
			}).then(res => {
				this.routineList = res.data.data
			})
			// 隐患排查
			api.default.getDanger({
				"planYear": new Date().getFullYear(),
				"planMonth": [
					new Date().getMonth() + 1
				]
			}).then(res => {
				this.dangerList = res.data.data
			})

			// 隐患排查
			api.default.getRenovate({
				"planYear": new Date().getFullYear(),
				"planMonth": [
					new Date().getMonth() + 1
				]
			}).then(res => {
				this.renovateList = res.data.data
			})

			//节假日和重大安全
			api.default.getSafety({
				"planYear": new Date().getFullYear(),
				"planMonth": [
					new Date().getMonth() + 1
				]
			}).then(res => {
				this.safetyList = res.data.data
			})
		},
		methods: {
			// 我的任务
			tastClick(path) {
				this.$goBack(path, 2);
			},

			// 我的方案
			myPlanClick(path) {
				this.$goBack(path, 2);
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
		// padding: 0 10px;
		// border: 1px #8EC7F2 solid;

		.conent-top {
			text-align: center;

			.conent-img {
				width: 100%;
				height: 450rpx;

			}
		}

		.myProject {
			padding: 0 10px;

			.myPlan {
				width: 100%;
				height: 350rpx;
				background-color: white;
				border-radius: 5px;
				margin: 10px 0;

				.myPlan-examine {
					width: 46%;
					background-color: #5DB6FC;
					height: 65%;
					border-radius: 5px;
					display: inline-block;

					.myPlan-examine_title {
						display: block;
						font-size: 20rpx;
						border-bottom: 1px white solid;
						color: white;
						padding: 5px 10px;
					}

					.myPlan-examine_issue {
						width: 50%;
						color: #C74941;
						display: inline-block;
						font-size: 26rpx;
						text-align: center;
					}

					.myPlan-examine_home {
						width: 50%;
						text-align: center;
						display: inline-block;
						font-size: 26rpx;
						margin: 14rpx 0 0 0;
					}



				}

				.myPlan-Task {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-around;
					margin-top: 20rpx;

					.myPlan-Task-bg {
						background-color: white;
						// padding: 5px;
						border-radius: 10rpx;
						width: 90%;
						margin: 15rpx auto;
						height: 150rpx;
						position: relative;

						.myPlan-Task-bottom {
							width: 100%;
							position: absolute;
							bottom: 10px;
							text-align: center;

							.myPlan-examine_bottom {
								// width: 35%;
								font-size: 22rpx;
								display: inline-block;
								border-radius: 5rpx;
								padding: 4rpx 12rpx;
								margin: 0 8rpx;
								// border: 1px red solid;

							}
						}
					}
				}


			}

			.myPlan-title {
				width: 30%;
				display: inline-block;
				margin: 8px 0 8px 15px;
				padding: 0 6px;
				color: #1590EF;
				border-left: 2px #0D91FF solid;
			}

			.myPlan-date {
				font-size: 25rpx;
				display: inline-block;
				width: 60%;
				text-align: right;
			}

			.myTask {
				width: 100%;
				height: 270rpx;
				background-color: white;
				border-radius: 5px;

				.nav_view {
					width: 23%;
					text-align: center;
					display: inline-block;
					position: relative;
					margin: 5px 0;

					.nav_img {
						width: 120rpx;
						height: 120rpx;
					}

					.nav_img_center {
						position: absolute;
						top: 13%;
						left: 50%;
						width: 60rpx;
						height: 60rpx;
						transform: translate(-50%, 0);
					}

					.nav_text {
						display: block;
						text-align: center;
						font-size: 14px;
						margin: 0 0 5px 0;
					}
				}

				// .myTask_details {
				//  width: 20%;
				//  text-align: center;
				//  display: inline-block;
				//  margin: 20rpx 0;
				//  position: relative;

				// }

				// .myTask_img {
				//  width: 100rpx;
				//  height: 100rpx;
				// }
			}
		}


	}
</style>
